<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery JSON动态获取表格数据代码 - 站长素材</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
	/*双击展开关闭*/
	function dbClick(obj) {
		if($(obj).next().is(":hidden")) {
			$(obj).next().show();
		} else {
			$(obj).next().hide();
		}
	};
	$(function() {
		$("#mainTable thead").next().empty();
		var k = 0;
		$.getJSON("revenue.json", function(data) {
			$.each(data, function(mainIndex, mainTable) {
				/*收入单位*/
				var mainTrObj = "<tr class='mainTr warning' ondblclick='dbClick(this)'><td>" + mainTable.incomeUnit + "</td><td>" + mainTable.firm + "</td><td>" + mainTable.number + "</td><td>" + mainTable.instructionType + "</td><td>" + mainTable.dept + "</td><td>" + mainTable.totalPrice + "</td></tr>";
				$("#mainTable").append(mainTrObj);
				/*支出单位表头*/
				var haveChild = data[k].child.length;
				if(haveChild == 0) {
					var nullHead = "<tr><td colspan='5' align='center'>暂无数据</td></tr>";
					$("#mainTable").append(nullHead);
				} else {
					var smallTit = "<tr><td colspan='6'><table id='smallTable" + k + "' class='table-condensed table smallTable'><tr id='smallTr" + k + "' class='success'><td>支出结算单位</td><td>数量</td><td>支出价格</td><td>费用类型</td></tr></table></td></tr>";
					$("#mainTable").append(smallTit);
				}
				/*支出单位遍历*/
				var numnerSum = 0;
				var priceSum = 0;
				var unsettled = 0;
				var child = data[k].child;
				for(var j = 0; j < haveChild; j++) {
					numnerSum = numnerSum + parseInt(child[j].number);
					priceSum = priceSum + parseFloat(child[j].price);
					priceSum = Math.round(priceSum * 100) / 100;
					unsettled = parseFloat(mainTable.totalPrice) - priceSum;
					unsettled = Math.round(unsettled * 100) / 100;
					var smallTrObj = "<tr class='smallTr'><td>" + child[j].expendUnit + "</td><td>" + child[j].number + "</td><td>" + child[j].price + "</td><td colspan='2'>" + child[j].type + "</td></tr>";
					$("#smallTr" + k).after(smallTrObj);
					/*计算数量、价格、未结费*/
				}
				/*小计行*/
				var totalTrObj = "<tr class='danger'><td>小计</td><td>" + numnerSum + "</td><td>" + priceSum + "</td><td align='center'>未结费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + unsettled + "</td></tr>";
				$("#smallTable" + k).append(totalTrObj);
				console.log(priceSum);
				console.log("未结费" + unsettled);
				k++;
			});
		});
		/*表格显示*/
		/*全部关闭*/
		$("#closeBtn").click(function() {
			$(".mainTr").next().hide();
		});
		/*全部展开*/
		$("#openBtn").click(function() {
			$(".mainTr").next().show();
		});
	})
</script>

</head>
<body>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>注：由于服务器不支持JSON，所以会出现无数据，下载压缩包自行搭建，谢谢！</p></div>
<table id="mainTable" class="table">
	<thead>
		<tr>
			<td>
				<input id="openBtn" type="button" class="btn btn-default" value="全部展开" />
				<input id="closeBtn" type="button" class="btn btn-default" value="全部关闭" />
			</td>
			<td></td>
			<td colspan="2">
				<h3>支出预算表</h3>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr class="active">
			<th>收入结算单位</th>
			<th>厂商简称</th>
			<th>数量</th>
			<th>指令类型</th>
			<th>指令接收部门</th>
			<th>总预算支出</th>
		</tr>
	</thead>
</table>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>